<template>
  <div class="hello">
    <p class="itm">考试登录</p>
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <div class="changeLogin">
      <p @click="changeLogins">忘记密码?</p>
    </div>
    <div class="main">
      <div class="wave1" style="bottom: 30%"></div>
      <div class="wave2" style="bottom: 30%"></div>
      <div class="wave3" style="bottom: 30%"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant'

export default {
  name: 'login',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    //忘记密码
    changeLogins() {
      this.$router.push('/changeLogin')
    },
    onSubmit() {
      axios({
        method: 'post',
        //修改
        url: this.baseURL + '/api/api/login',
        data: {
          username: this.username,
          password: this.password
        }
      }).then((response) => {
        // console.log(response)
        if (response.data.code == 1) {
          localStorage.setItem('major_id', response.data.major_id)
          localStorage.setItem('username', response.data.username)
          localStorage.setItem('id', response.data.id)
          localStorage.setItem('mag', response.data.msg)
          localStorage.setItem('id_card', this.username)
          localStorage.setItem('login_time', new Date().getTime() + 1 * 24 * 60 * 60 * 1000)
          this.$router.push('/index')
          Toast('欢迎回来')
        } else {
          Toast('账号或密码错误')
        }
      })
    }
  },
  mounted() {
    console.log(this.baseURL + '/api/api/login')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.itm {
  font-size: 1rem;
  text-align: center;
}
.main {
  position: fixed;
  bottom: 0%;
  align-items: center;
  width: 100%;
  height: 80px;
  background-color: white;
  overflow: hidden;
  z-index: 100;
}

.wave1 {
  position: absolute;
  left: 0;
  top: 10px;
  width: 300px;
  height: 300px;
  background-color: blue;
  border-radius: 46%;
  animation-duration: 5s;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.wave2 {
  position: absolute;
  left: 180px;
  top: 20px;
  width: 300px;
  height: 300px;
  background-color: blue;
  border-radius: 46%;
  animation-duration: 5s;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.wave3 {
  position: absolute;
  left: 300px;
  top: 10px;
  width: 300px;
  height: 300px;
  background-color: blue;
  border-radius: 46%;
  animation-duration: 5s;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, 0) rotateZ(0deg);
  }

  50% {
    transform: translate(-50%, -1%) rotateZ(180deg);
  }

  100% {
    transform: translate(-50%, 0) rotateZ(360deg);
  }
}
.changeLogin {
  display: flex;
  color: blue;
  flex-direction: row-reverse;
  margin-right: 20px;
}
</style>
